<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#box {
			width: 100%;
			height: calc(100vh);
			position: relative;
			background: #009688;
		}

		#drag {
			width: 200px;
			height: 200px;
			position: relative;
			background: #EB7350;
			cursor: move;
		}
	</style>
</head>

<body>

	<div id="box">
		<div id="drag">
		</div>
	</div>

	<!-- js实现代码 -->
	<script>
		window.onload = function () {
			var box = document.getElementById("box");
			var drag = document.getElementById("drag");

			//鼠标事件
			dragTool(drag);
			scaleTool(drag, box);

			//拖拽方法
			function dragTool(node) {
				node.onmousedown = function (ev) {
					//浏览器兼容
					var e = ev || window.event;
					//鼠标相对元素距离
					var offsetX = ev.offsetX;
					var offsetY = ev.offsetY;

					document.onmousemove = function (ev) {
						//浏览器兼容
						var e = ev || window.event;
						//定义currentLeft
						var currentLeft = e.clientX - offsetX;
						//定义currentTop
						var currentTop = e.clientY - offsetY;

						//限制左边界
						if (currentLeft <= 0) {
							currentLeft = 0;
						}
						//限制右边界
						var windowWidth = document.documentElement.clientWidth || document.body.clientWidth
						if (currentLeft >= windowWidth - node.offsetWidth) {
							currentLeft = windowWidth - node.offsetWidth
						}
						//限制上边界
						if (currentTop <= 0) {
							currentTop = 0;
						}
						//限制下边界
						var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
						if (currentTop >= windowHeight - node.offsetHeight) {
							currentTop = windowHeight - node.offsetHeight
						}

						//被拖拽元素的left top 值
						node.style.left = currentLeft + "px";
						node.style.top = currentTop + "px";
					}
				}

				document.onmouseup = function () {
					document.onmousemove = null;
				}
			}

			//缩放方法
			function scaleTool(drag, box) {
				//判断鼠标滚轮滚动方向
				if (drag.addEventListener) {
					drag.addEventListener('DOMMouseScroll', wheel, false);
				}
				drag.onmousewheel = wheel;
				//统一处理滚轮滚动事件
				function wheel(event) {
					var delta = 0;
					if (!event) event = window.event;
					if (event.wheelDelta) {
						delta = event.wheelDelta / 120;
						if (window.opera) delta = -delta;
					} else if (event.detail) {
						delta = -event.detail / 3;
					}
					if (delta)
						handle(delta);
				}
				//上下滚动时的具体处理函数
				function handle(delta) {
					//获取当前值
					var w = drag.offsetWidth;
					var h = drag.offsetHeight;
					var top = drag.offsetTop;
					var left = drag.offsetLeft;
					var right = box.offsetWidth - (left + w);
					var bottom = box.offsetHeight - (top + h)
					var step = 0.1;

					if (delta < 0) { //向下滚动

						//设置最小值
						var currentw = Math.max(100, w - w * step);
						var currenth = Math.max(100, h - h * step);
						if (currentw !== 100 || currenth !== 100) {
							//设置最大值，不大于外部元素
							currentw = currentw >= box.offsetWidth ? box.offsetWidth : currentw;
							currenth = currenth >= box.offsetHeight ? box.offsetHeight : currenth;
							//设置不超出元素范围
							var currenttop = (top + (h * step / 2)) < 0 ? 0 : (top + (h * step / 2));
							var currentleft = (left + (w * step / 2)) < 0 ? 0 : (left + (w * step / 2));
							var currentright = (right + (w * step / 2)) < 0 ? 0 : (right + (w * step / 2));
							var currentbottom = (bottom + (h * step / 2)) < 0 ? 0 : (bottom + (h * step / 2));

							drag.style.width = currentw + "px";
							drag.style.height = currenth + "px";
							drag.style.top = currenttop + "px";
							drag.style.left = currentleft + "px";
							drag.style.right = currentright + "px";
							drag.style.bottom = currentbottom + "px";
						}
					} else { //向上滚动

						//设置最小值
						var currentw = Math.max(100, w + w * step);
						var currenth = Math.max(100, h + h * step);
						if (currentw !== 100 || currenth !== 100) {
							//设置最大值，不大于/超出窗口
							currentw = currentw >= box.offsetWidth ? box.offsetWidth : currentw;
							currenth = currenth >= box.offsetHeight ? box.offsetHeight : currenth;
							//设置不超出元素范围
							var currenttop = (top - (h * step / 2)) < 0 ? 0 : (top - (h * step / 2));
							var currentleft = (left - (w * step / 2)) < 0 ? 0 : (left - (w * step / 2));
							var currentright = (right - (w * step / 2)) < 0 ? 0 : (right - (w * step / 2));
							var currentbottom = (bottom - (h * step / 2)) < 0 ? 0 : (bottom - (h * step / 2));

							drag.style.width = currentw + "px";
							drag.style.height = currenth + "px";
							drag.style.top = currenttop + "px";
							drag.style.left = currentleft + "px";
							drag.style.right = currentright + "px";
							drag.style.bottom = currentbottom + "px";
						}
					}
				}
			}

		}
	</script>
</body>

</html>